<template>
  <div class="matchs">
    <el-input
      placeholder="请输入关键字过滤"
      prefix-icon="el-icon-search"
      v-model="keyword">
    </el-input>
    <el-table
      :data="matchs"
      border
      stripe
      style="width: 100%">
      <el-table-column
        fixed
        sortable
        prop="id"
        label="ID"

        width="150">
      </el-table-column>
      <el-table-column
        prop="matchTime"
        sortable
        label="时间"
        width="300">
      </el-table-column>
      <el-table-column
        sortable
        prop="team1"
        label="主队"
        width="300">
      </el-table-column>
      <el-table-column
        sortable
        prop="matchResult"
        label="赛果">
      </el-table-column>
      <el-table-column
        sortable
        prop="team2"
        label="客队">
      </el-table-column>
    </el-table>

    <Pagination url="/teamMatch/list" v-model="matchs"/>
  </div>
</template>

<script>

  export default {
    name: "teamMatch",
    data() {
      return {
        matchs: []
      }
    },
    /* computed特性
 1.是计算值，
 2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
 3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
 watch特性
 1.是观察的动作，
 2.应用：监听props，$emit或本组件的值执行异步操作
 3.无缓存性，页面重新渲染时值不变化也会执行*/
    computed: {
      page_arrs() {
        let {currentPage, pagesize} = this
        return this.arrs.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      },
      current_page() {
        return this.currentPage
      }
    },
    methods: {
      primaryPage() {
        this.currentPage = 1
      },
      prePage() {
        if (this.currentPage == 1) {
          return
        }
        this.currentPage = this.currentPage - 1
      },
      nextPage() {
        if (this.currentPage == Math.ceil(this.arrs.length / this.pagesize)) {
          return
        }
        this.currentPage = this.currentPage + 1
      },
      lastPage() {
        this.currentPage = Math.ceil(this.arrs.length / this.pagesize)
      }
    }
  }
</script>

<style lang="stylus">

</style>
